<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滚动条案例-用户协议阅读</title>
    <style type="text/css">

        #info {
            width: 300px;
            height: 500px;
            background-color: #bfa;
            overflow: auto;
        }

    </style>
    <script type="text/javascript">
        /**
         * 实践案例-用户协议阅读
         */
        window.onload = function () {

            /*
             * 当垂直滚动条滚动到底时使表单项可用
             * onscroll
             * 	- 该事件会在元素的滚动条滚动时触发
             */

            //获取id为info的p元素
            var info = document.getElementById("info");
            //获取两个表单项
            var inputs = document.getElementsByTagName("input");
            //为info绑定一个滚动条滚动的事件onscroll，当用户在对象上的滚动条中重新定位滚动框时触发。
            info.onscroll = function () {
                //检查垂直滚动条是否滚动到底，
                // 检查info元素的scrollHeight（内容的总高度，包括溢出部分）
                // 减去scrollTop（滚动条滚动的距离）
                // 是否等于clientHeight（元素的可见高度）
                if (info.scrollHeight - info.scrollTop == info.clientHeight) {
                    //滚动条滚动到底，使表单项可用
                    /*
                     * disabled属性可以设置一个元素是否禁用，
                     * 	如果设置为true，则元素禁用
                     * 	如果设置为false，则元素可用
                     */
                    inputs[0].disabled = false;
                    inputs[1].disabled = false;
                }
            };
        };
    </script>
</head>
<body>
<h3>欢迎亲爱的用户注册</h3>
<p id="info">
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
    亲爱的用户，请仔细阅读以下协议，如果你不仔细阅读你就别注册
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled"/>我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled"/>
</body>
</html>
